<template>
  <div>
    <!-- 整体容器 -->
    <el-container>

      <!-- 侧边导航栏 -->
      <el-aside :width="asideWidth">
        <!-- 顶部Logo区域 -->
        <div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center">
          <img src="@/assets/学生管理.png" style="width: 30px;" alt="">
          <span class="logo-title" v-if="!isCollapse && isExpanded">学生管理系统</span>
        </div>
        <!-- 导航菜单 -->
        <el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"
                 active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"
                 style="border: none">
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template>
            <el-menu-item index="/user">用户管理</el-menu-item>
            <el-menu-item index="/admin">管理员管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主体容器 -->
      <el-container>

        <!-- 顶部标题栏 -->
        <el-header style="height: 60px; line-height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
          <i :class="collapseIcon" @click="handleCollapse" style="font-size: 26px"></i>
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 用户区域 -->
          <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
            <i :class="fullScreenIcon" @click="handleFullScreen" style="font-size: 25px"></i>
            <!-- 下拉菜单 -->
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: pointer">
                <img src="@/assets/学生管理.png" alt="" style="width: 30px; height: 30px; margin: 0 5px">
                <span>管理员</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main>
          <!-- 欢迎信息 -->
          <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            欢迎登录学生管理系统！
          </div>

          <div style="display: flex">
            <el-card style="width: 50%; margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>青哥哥带你做毕设2024</span>
              </div>
              <div>
                2024毕设正式开始了！青哥哥带你手把手敲出来！
                <div style="margin-top: 20px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>

            <el-card style="width: 50%">
              <div slot="header" class="clearfix">
                <span>渲染用户数据</span>
              </div>
              <div>
                <el-table :data="users">
                  <el-table-column label="ID" prop="id"></el-table-column>
                  <el-table-column label="用户名" prop="username"></el-table-column>
                  <el-table-column label="姓名" prop="name"></el-table-column>
                  <el-table-column label="地址" prop="address"></el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false, // 控制侧边导航栏是否折叠
      isExpanded: true, // 控制是否完全展开
      asideWidth: '200px', // 侧边导航栏宽度
      collapseIcon: 'el-icon-s-fold', // 控制导航栏折叠图标
      isFullScreen: false, // 控制是否全屏
      fullScreenIcon: 'el-icon-quanping', // 控制全屏图标
      users: [],
    }
  },
  methods: {
    // 控制全屏
    handleFullScreen() {
      if (!this.isFullScreen) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    },
    // 处理导航栏的折叠和展开
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.isExpanded = false;
        this.asideWidth = '64px';
      } else {
        this.asideWidth = '200px';
        setTimeout(() => {
          this.isExpanded = true;
        }, 120);
      }
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    // 处理全屏状态变化
    handleFullScreenChange() {
      this.isFullScreen = !!document.fullscreenElement;
      this.fullScreenIcon = this.isFullScreen ? 'el-icon-quxiaoquanping' : 'el-icon-quanping';
    },
    // 退出登录
    logout(){
      localStorage.removeItem('user-token')
      this.$router.push('/login')
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
    request.get('/user/selectAll').then(res => {
      this.users = res.data
    })
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
  },
}
</script>

<style>
/* 全局样式调整 */
/* 设置菜单项和菜单容器的背景颜色为深色（#000c17） */
.el-menu--inline, .el-menu-item {
  background-color: #000c17 !important;
}

/* 子菜单标题样式 */
/* 设置子菜单标题的高度和行高为40px，内边距为左右25px，取消颜色变化的过渡效果 */
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 25px !important;
  transition: color 0s;
}

/* 当菜单折叠时，设置子菜单标题的内边距为左右20px */
.el-menu--collapse .el-submenu__title {
  padding: 0 20px !important;
}

/* 设置子菜单标题第一个图标的上边距为2px */
.el-submenu__title>i:nth-child(1) {
  margin-top: 2px;
}

/* 设置子菜单标题的箭头图标上边距为-5px，使其对齐 */
.el-submenu__title>i.el-submenu__icon-arrow {
  margin-top: -5px;
}

/* 菜单项样式 */
/* 设置菜单项的最小宽度为0，宽度为父元素宽度减去10px，外边距为5px，高度和行高为40px，圆角半径为5px */
.el-menu-item {
  min-width: 0 !important;
  width: calc(100% - 10px);
  margin: 5px;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 5px;
}

/* 设置内联菜单项的左内边距为50px */
.el-menu--inline>.el-menu-item {
  padding-left: 50px !important;
}

/* 激活状态的菜单项样式 */
/* 设置激活状态的菜单项背景颜色为dodgerblue */
.el-menu-item.is-active {
  background-color: dodgerblue !important;
}

/* 菜单项悬停样式 */
/* 设置菜单项在悬停时的文字颜色为白色 */
.el-menu-item:hover {
  color: #fff !important;
}

/* 子菜单标题悬停样式 */
/* 设置子菜单标题在悬停时及其所有子元素的文字颜色为白色 */
.el-submenu__title:hover *, .el-submenu__title:hover {
  color: #fff !important;
}

/* 侧边导航栏样式 */
/* 设置侧边导航栏的阴影效果，背景颜色为深色（#001529），文字颜色为白色，最小高度为100vh，宽度变化时的过渡效果为0.3秒 */
.el-aside {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  background-color: #001529;
  color: #fff;
  min-height: 100vh;
  transition: width .3s;
}

/* 设置菜单折叠时的提示框内边距为左右15px */
.el-menu--collapse .el-tooltip {
  padding: 0 15px !important;
}

/* Logo标题样式 */
/* 设置Logo标题的左边距为5px，所有样式变化的过渡效果为0.3秒 */
.logo-title {
  margin-left: 5px;
  transition: all .3s;
}

/* 菜单样式 */
/* 设置菜单的所有样式变化的过渡效果为0.3秒 */
.el-menu {
  transition: all .3s;
}

</style>
